<template>
    <div class="detail-modal">
        <div class="modal" id="detailModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog" id="myModalLabel">
                <div class="modal-content"  >
                    <div class="modal-header">  
                        <div>
                            <span>攻击源：{{detail.mac}} </span>
                            <span style="margin-left: 16px;">备注名：{{detail.desc ? detail.desc : '-'}}</span>
                        </div>   
                        <span class="close" data-dismiss="modal" aria-hidden="true">&times;</span>
                    </div>		
                    <div class="modal-body tables">				
                        <loading v-if='!detailshow'></loading>			
                        <table v-else class="data-table table-border">
                            <thead class="thead-bottom-line">	
                                <tr>
                                    <th style="width:50px;"></th>
                                    <th style="width:50px;">序 号</th>
                                    <th>攻击类型</th>
                                    <th>物理线路</th>
                                    <th>次 数</th>
                                    <th>时 间</th>
                                </tr>
                            </thead>
                            <tbody v-for='(data, i) in detailDatas' :key="i">
                                <tr @click.stop='showIt(i)'>
                                    <template v-if='i < detailData.length'>
                                        <td>
                                            <Icon v-if="showIndex === i" type="arrow-down-b"></Icon>
                                            <Icon v-else type="arrow-right-b"></Icon>											
                                        </td>
                                        <td>{{i + 1}}</td>
                                        <td><p>{{data.type}}</p></td>
                                        <td> 
                                            <span v-if='data.groupid === 0'>外部主机</span>
                                            <span v-else-if='data.groupid === -1'>透传主机</span>
                                            <span v-else>线路{{data.groupid}}</span>
                                            </td>
                                        <td  
                                            data-toggle="tooltip" 
                                            data-placement="bottom" 
                                            :title='data.count'>
                                            
                                            {{data.count?data.count:'-'}}
                                        </td>
                                        <td >{{data.end_time}}</td>
                                    </template>
                                    <template v-else>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                    </template>
                                </tr>
                                <tr>
                                    <td colspan="8" v-if='showIndex === i'>
                                        <expand 
                                            :table='table' 
                                            :num="data.count" 
                                            @pageData="pageData">
                                        </expand>
                                    </td>										
                                </tr>								
                            </tbody>
                        </table>
                    </div>
			        <div slot="footer"> </div>
		        </div>
            </div>
        </div>
    </div>
</template>
<script>
    import LogManageService from 'services/logManageService'
    import loading from 'components/common/loading'
    import Modals from 'components/common/Modals'
    import expand from './expandrow'
    export default{
        components: {
            loading,
            expand,
            Modals
        },
        props: {
            detail: {
                type: Object
            }
        },
        data() {
            return{
                showIndex: -1,
                logs: [], //原始数据
                detailData: [],
                table: [],
                params_his: {},
                detailshow: false,
                model_show: false
            }
        },
        watch: {
            detail: function(val) {
                this.showIndex = -1
                this.recvDetailData(this.detail.mac) 
            },
        },
        computed: {
            detailDatas: function() {
                let detailDatas = [{}, {}, {}, {}, {}, {}, {}, {}]
                for(let i = 0; i < this.detailData.length; i++) {
                    for(let j = 0; j < this.detailData.length - i - 1; j++) {
                        let time1 = this.timechange(this.detailData[j].end_time)
                        let time2 = this.timechange(this.detailData[j + 1].end_time)
                        if (time1 < time2) {
                            let temp = this.detailData[j]
                            this.detailData[j] = this.detailData[j + 1]
                            this.detailData[j + 1] = temp
                        }
                    }
                }
                for(let i = 0; i < this.detailData.length; i++) {
                    detailDatas[i] = this.detailData[i]
                }
                return detailDatas
            }
        },
        methods: {
            cancel() {
                this.model_show = false
                this.$emit('modelShowStatus', this.model_show)
            },
            recvDetailData(mac) {
                let params = {
                    attack_source: mac
                };
                LogManageService.getPermeateLogByMac(params)
                    .then((res)=>{
                        if (res.errcode === 0) {
                            this.detailshow = true;
                            this.logs = res['2'].logs
                            this.detailData = this.logs.map((item) =>{
                                let type = '';
                                switch (Number(item.attack_type)) {
                                    case 1:
                                        type = '哨兵节点存活探测';
                                        break
                                    case 2:
                                        type = '哨兵节点服务探测'
                                        break
                                    case 5:
                                        type = '全息节点存活探测'
                                        break
                                    case 6:
                                        type = '全息节点服务探测'
                                        break
                                    case 7:
                                        type = '端口虚开'
                                        break
                                    default:
                                        break
                                }
                                let obj = {
                                    // response_ip: response_ip,
                                    type: type,
                                    end_time: item.end_time,
                                    start_time: item.start_time,
                                    groupid: item.groupid,
                                    count: item.count
                                }
                                return obj
                            })	
                        }
                    })
            },
            // 攻击详情
            showIt(i) {
                if (this.showIndex === i) {
                    this.showIndex = -1
                } else {
                    this.showIndex = i 
                }	

                this.params_his = {
                    log_id: this.logs[i].log_id		
                }
                this.pageData(1)
            },
            pageData(page) {
                this.params_his.page = page
                LogManageService.getStatisticDetail(this.params_his)
                .then((res) => {
                    if (res.errcode === 0) {
                        this.table = res['3'].logs
                    }
                    			  
                })
            },
            timechange(str) {
                let date = str
                date = new Date(Date.parse(date.replace(/-/g, "/")))
                date = date.getTime()
                return date
            }
        }
    }
</script>
<style scoped>
    #detailModel .modal-content{
        top: 50%;
    }
</style>

